<template>
    <div>
      <NestedList :list="nestedData" />
    </div>
  </template>
  
  <!-- <script>
  import NestedList from './NestedList.vue'
  
  export default {
    components: {
      NestedList
    },
    data() {
      return {
        nestedData: [
          {
            name: 'Item 1',
            children: [
              {
                name: 'Subitem 1',
                children: [
                  {
                    name: 'Subsubitem 1'
                  },
                  {
                    name: 'Subsubitem 2'
                  }
                ]
              },
              {
                name: 'Subitem 2'
              }
            ]
          },
          {
            name: 'Item 2'
          }
        ]
      }
    }
  }
  </script> -->
  <script setup>
  import { ref } from 'vue'
  import NestedList from './NestedList.vue'
  defineOptions({
    name: 'RecursiveComponent'
  })
  const nestedData = ref([
    {
      name: 'Item 1',
      children: [
        {
          name: 'Subitem 1',
          children: [
            {
              name: 'Subsubitem 1'
            },
            {
              name: 'Subsubitem 2'
            }
          ]
        },
        {
          name: 'Subitem 2'
        }
      ]
    },
    {
      name: 'Item 2'
    }
  ])
  </script>
  